import React, { Component } from 'react';
import { StyleSheet, TouchableOpacity, ScrollView, RefreshControl, Image } from 'react-native';
import { Container, Content, View, Button, Text, Icon } from 'native-base';
import { ListItem, Avatar } from 'react-native-elements';
import { connect } from 'react-redux';
import { BoxShadow } from 'react-native-shadow';

import { Loading } from '../component';
import { Colors, Metrics } from '../theme';
import Config from '../config/index';
import _updateConfig from '../../update.json';
import { number } from 'prop-types';

const shadowOpts = {
  height: 151,
  width: Metrics.screenWidth - 30,
  color: "#fff",
  border: 5,
  radius: 15,
  opacity: 0.2,
  x: 0,
  y: 0,
  style: { marginTop: 10, alignSelf: 'center' }
}

class Users extends Component {
  constructor(props) {
    super(props);
    this.state = {
      headPortrait: '',
      isLoading: false,
      refreshLoading: false,
    }
  }


  UNSAFE_componentWillMount() {

  }

  componentDidMount() {
    this.initFunc();
  }

  initFunc() {
    if (this.props.headPortrait) {
      this.setState({ headPortrait: this.props.headPortrait })
    }

    // this.setState({ isLoading: true })
    // setTimeout(() => {
    //   this.setState({ isLoading: false })
    // }, 1000)
  }

  toFixedFunc(val){
    return Number(val).toFixed(2); 
  }

  userLevelFunc(num){
    let text = '';
    switch (num) {
      case 1:
        text = '普通';
        break;
        case 2:
        text = '白银级';
        break;
        case 3:
        text = '黄金级';
        break;
        case 4:
        text = '白金级';
        break;
        case 5:
        text = '钻石级';
        break;
    
      default:
        text = '';
        break;
    }
    return text;
  }

  refreshFunc() {
    this.setState({ refreshLoading: true })
    this.initFunc();
    setTimeout(() => {
      this.setState({ refreshLoading: false })
    }, 1000)
  }

  //  路由地址
  toNavigateFunc(uri,index) {
    if (uri) {
      if (index) {
        this.props.navigation.navigate(uri,{selectIndex: index})
      } else {
        this.props.navigation.navigate(uri)
      }
    }
  }

  /**
  * 渲染我的交易
  */
  renderTransaction() {
    return (
      <BoxShadow setting={shadowOpts}>
        <View style={Styles.barContainers}>
          <View style={Styles.barHeader}>
            <Text style={Styles.barTitle}>我的任务</Text>
            <TouchableOpacity style={Styles.userLableCont} onPress={() => this.toNavigateFunc('MyTransaction')}>
              <Text style={Styles.barTitleRight}>查看全部</Text>
              <Icon type="FontAwesome" name="angle-right" style={Styles.rightIcons} />
            </TouchableOpacity>
          </View>
          <View style={Styles.barBody}>

            <TouchableOpacity onPress={() => this.toNavigateFunc('MyTransaction',0)}>
              <View style={Styles.barBodyItem}>
                <View>
                  <Image source={require('../asserts/images/user/img_mai.png')} style={Styles.barIcon} />
                </View>
                <Text style={Styles.barText}>待提交</Text>
              </View>
            </TouchableOpacity>

            <TouchableOpacity onPress={() => this.toNavigateFunc('MyTransaction',1)}>
              <View style={Styles.barBodyItem}>
                <View>
                  <Image source={require('../asserts/images/user/img_jiaoyi.png')} style={Styles.barIcon} />
                </View>
                <Text style={Styles.barText}>审核中</Text>
              </View>
            </TouchableOpacity>

            <TouchableOpacity onPress={() => this.toNavigateFunc('MyTransaction',2)}>
              <View style={Styles.barBodyItem}>
                <View>
                  <Image source={require('../asserts/images/user/img_wancheng.png')} style={Styles.barIcon} />
                </View>
                <Text style={Styles.barText}>已完成</Text>
              </View>
            </TouchableOpacity>

            <TouchableOpacity onPress={() => this.toNavigateFunc('MyTransaction',3)}>
              <View style={Styles.barBodyItem}>
                <View>
                  <Image source={require('../asserts/images/user/img_shensu.png')} style={Styles.barIcon} />
                </View>
                <Text style={Styles.barText}>未通过</Text>
              </View>
            </TouchableOpacity>

          </View>
        </View>
      </BoxShadow>
    )
  }

  /**
	 * 渲染基本信息
	 */
  renderBasicInfo() {
    let { pay_auth, real_auth } = this.props;

    let yirenzheng = require('../asserts/images/user/img_yirenzheng.png');
    let yishiming = require('../asserts/images/user/img_yishiming.png');

    return (
      <BoxShadow setting={shadowOpts}>
        <View style={Styles.barContainers}>
          <View style={Styles.barHeader}>
            <Text style={Styles.barTitle}>基本信息</Text>
          </View>
          <View style={Styles.barBody}>

            <TouchableOpacity onPress={() => this.toNavigateFunc('Myteam')}>
              <View style={Styles.barBodyItems}>
                <View>
                  <Image source={require('../asserts/images/user/img_family.png')} style={Styles.barIcon} />
                </View>
                <Text style={Styles.barText}>我的团队</Text>
                <Text style={Styles.barText}></Text>
              </View>
            </TouchableOpacity>

            <TouchableOpacity onPress={() => this.toNavigateFunc('RealnameAuto')}>
              <View style={Styles.barBodyItems}>
                <View>
                  <Image source={require('../asserts/images/user/img_shiming.png')} style={Styles.barIcon} />
                </View>
                <Text style={Styles.barText}>实名认证</Text>
                <View>
                  {real_auth ? <Image source={yishiming} style={Styles.renzheng} /> : <Text style={Styles.barText}></Text>}
                </View>
              </View>
            </TouchableOpacity>

            <TouchableOpacity onPress={() => this.toNavigateFunc('ReceiptAccount')}>
              <View style={Styles.barBodyItems}>
                <View>
                  <Image source={require('../asserts/images/user/img_shoukuan.png')} style={Styles.barIcon} />
                </View>
                <Text style={Styles.barText}>收款账户</Text>
                <View>
                  {pay_auth == 1 ? <Image source={yirenzheng} style={Styles.renzheng} /> : <Text style={Styles.barText}></Text>}
                </View>
              </View>
            </TouchableOpacity>

            <TouchableOpacity onPress={() => this.toNavigateFunc('InviteFriends')}>
              <View style={Styles.barBodyItems}>
                <View>
                  <Image source={require('../asserts/images/user/img_yaoqing.png')} style={Styles.barIcon} />
                </View>
                <Text style={Styles.barText}>邀请好友 </Text>
                <Text style={Styles.barText}></Text>
              </View>
            </TouchableOpacity>

          </View>
        </View>
      </BoxShadow>
    )
  }

  render() {
    return (
      <Container>
        <ScrollView
          refreshControl={<RefreshControl
            refreshing={this.state.refreshLoading}
            onRefresh={() => {
              this.refreshFunc()
            }}
          ></RefreshControl>}
        >
          <Loading showLoading={this.state.refreshLoading ? false : this.state.isLoading} />
          <Content>
            <View style={Styles.topContent}>
              <TouchableOpacity style={Styles.settingCont} onPress={() => this.props.navigation.navigate('Message')}>
                <Icon type="Feather" name='mail' style={Styles.settingIcon} />
              </TouchableOpacity>
              <View style={Styles.userContent}>
                <View style={Styles.userContentLeft}>
                  <View style={Styles.headerContentNew}>
                    {
                      this.state.headPortrait ?
                        <Avatar
                          size="medium"
                          rounded
                          source={this.state.headPortrait}
                          onPress={() => this.props.navigation.navigate('UserCenter')}
                          activeOpacity={0.7}
                        /> :
                        <Avatar
                          size="medium"
                          rounded
                          source={require('../asserts/images/user/headPortrait.jpg')}
                          onPress={() => this.props.navigation.navigate('UserCenter')}
                          activeOpacity={0.7}
                        />
                    }
                  </View>

                  <View style={Styles.userNick}>
                    <Text style={Styles.userNickText}> {this.props.nickName} </Text>
                    <View style={Styles.userLableCont}>
                      <Text style={Styles.userLable} onPress={()=>{this.toNavigateFunc('UserLevel')}}>{this.userLevelFunc(this.props.userLevel)}</Text>
                      <Text style={Styles.userLable} onPress={()=>{this.toNavigateFunc('UserStar')}}>{this.props.userStar}星达人</Text>
                    </View>
                  </View>
                </View>

                <View style={Styles.userIdCont}>
                  <Text style={Styles.userIdText}> ID: {this.props.inviteCode} </Text>
                  <View>
                    <Text style={Styles.userVipText}>白金卡</Text>
                  </View>
                </View>
              </View>

              <View style={Styles.walletContent}>
                <View style={Styles.walletContLeft}>
                    <Text style={Styles.walletYueText}>用户余额（元）</Text>
                    <Text style={Styles.walletYueNum}>{this.toFixedFunc(this.props.userBalance)}</Text>
                    <View style={Styles.walletBtnCont}>
                      <Text style={Styles.walletBtn}>提现</Text>
                    </View>
                </View>

                <View style={Styles.walletContRight}>
                  <Text style={Styles.walletYueText}>发布余额（元）</Text>
                  <Text style={Styles.walletYueNum}>{this.toFixedFunc(this.props.publishBalance)}</Text>
                  <View style={Styles.walletBtnCont}>
                      <Text style={Styles.walletBtn}>充值</Text>
                      <Text style={Styles.walletBtn}>提现</Text>
                    </View>
                </View>
              </View>
              {/* <View style={Styles.headerContent}>
                {
                  this.state.headPortrait ?
                    <Avatar
                      size="large"
                      rounded
                      source={this.state.headPortrait}
                      onPress={() => this.props.navigation.navigate('UserCenter')}
                      activeOpacity={0.7}
                    /> :
                    <Avatar
                      size="large"
                      rounded
                      source={require('../asserts/images/user/headPortrait.jpg')}
                      onPress={() => this.props.navigation.navigate('UserCenter')}
                      activeOpacity={0.7}
                    />
                }

              </View>
              <Text style={Styles.userName}> {this.props.nickName} </Text>
              <View style={Styles.userMessage}>
                <Text style={Styles.messageText}>五星达人</Text>
                <Text style={{ color: Colors.bai }}>|</Text>
                <Text style={Styles.messageText}>贡献值 500</Text>
              </View> */}
            </View>

            <View style={Styles.bodyContent}>
              {/* 基础信息 */}
              {this.renderBasicInfo()}
              {/* 交易进度 */}
              {this.renderTransaction()}

              <View style={Styles.zijinCont}>
                <TouchableOpacity style={Styles.userItem} onPress={() => this.props.navigation.navigate('ProblemBack')}>
                  <View style={Styles.cardStyle}>
                    <View style={Styles.itemLeftCont}>
                      <Icon type="AntDesign" name="customerservice" style={Styles.leftIcons} />
                      <Text style={Styles.labelTxt}>联系客服</Text>
                    </View>
                    <Icon type="FontAwesome" name="angle-right" style={Styles.rightIcons} />
                  </View>
                </TouchableOpacity>

                <TouchableOpacity style={Styles.userItem} onPress={() => this.props.navigation.navigate('ProblemBack')}>
                  <View style={Styles.cardStyle}>
                    <View style={Styles.itemLeftCont}>
                      <Icon type="MaterialIcons" name="feedback" style={Styles.leftIcons} />
                      <Text style={Styles.labelTxt}>问题反馈</Text>
                    </View>
                    <Icon type="FontAwesome" name="angle-right" style={Styles.rightIcons} />
                  </View>
                </TouchableOpacity>

                <TouchableOpacity style={Styles.userItem} onPress={() => this.props.navigation.navigate('Setting')}>
                  <View style={Styles.cardStyle}>
                    <View style={Styles.itemLeftCont}>
                      <Icon type="AntDesign" name="setting" style={Styles.leftIcons} />
                      <Text style={Styles.labelTxt}>设置</Text>
                    </View>
                    <Icon type="FontAwesome" name="angle-right" style={Styles.rightIcons} />
                  </View>
                </TouchableOpacity>
              </View>

            </View>




          </Content>
        </ScrollView>
      </Container>
    );
  }

}


const mapStateToProps = state => ({
  logged: state.user.logged,
  token: state.user.token,
  phone: state.user.phone,
  nickName: state.user.nickName,
  headPortrait: state.user.headPortrait,
  inviteCode: state.user.inviteCode,
  userLevel: state.user.userLevel,
  userStar: state.user.userStar,
  userBalance: state.user.userBalance,
  publishBalance: state.user.publishBalance,
  reputationScore: state.user.reputationScore,
  level: state.user.level,

});

const mapDispatchToProps = dispatch => ({

});

export default connect(mapStateToProps, mapDispatchToProps)(Users);

const Styles = StyleSheet.create({
  topContent: {
    paddingBottom: 20,
  },
  settingCont: {
    marginTop: 18,
    flexDirection: 'row',
    justifyContent: 'flex-end',
  },
  settingIcon: {
    marginRight: Metrics.mainMagin,
    fontSize: Metrics.fontSize18,
    color: Colors.subject
  },
  headerContent: {
    marginTop: 8,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  userName: {
    marginTop: 8,
    textAlign: 'center',
    color: Colors.bai,
    fontSize: Metrics.fontSize16
  },
  userMessage: {
    marginTop: 12,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  messageText: {
    width: Metrics.screenWidth / 2 - 30,
    textAlign: 'center',
    color: Colors.bai,
    fontSize: Metrics.fontSize16
  },
  bodyContent: {
    padding: Metrics.mainPadding,
    backgroundColor: Colors.huiED,
  },
  zijinCont: {
    marginTop: Metrics.mainPadding,
    borderRadius: 10,
    overflow: "hidden",
    backgroundColor: Colors.bai,
  },
  userItem: {
    backgroundColor: Colors.bai
  },
  cardStyle: {
    height: 50,
    marginLeft: 15,
    paddingRight: 10,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderColor: Colors.C7,
  },
  itemLeftCont: { flexDirection: "row", },
  leftIcons: { color: Colors.subject, fontSize: 20 },
  labelTxt: { color: Colors.hui66, fontSize: 14, marginLeft: 6 },
  rightIcons: { color: '#aab9ca', fontSize: Metrics.fontSize18 },
  barContainers: { width: Metrics.screenWidth - 20, height: 150, borderRadius: 10, alignSelf: 'center', backgroundColor: Colors.bai, },
  barHeader: { flexDirection: 'row', justifyContent: "space-between",alignItems: 'center', padding: 15, borderBottomWidth: StyleSheet.hairlineWidth, borderColor: Colors.C7 },
  barTitle: { fontSize: 16, color: Colors.C10, fontWeight: '500' },
  barTitleRight: {fontSize: 12, color: Colors.hui99, fontWeight: '500', marginRight: 6},
  barHeaderRight: { flex: 1 },
  barMore: { textAlign: 'right', fontSize: 14, color: Colors.C10 },
  barBody: { flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', paddingTop: 10, paddingBottom: 14, flexWrap: "wrap" },
  barBodyItems: { justifyContent: 'center', alignItems: 'center' },
  barIcon: { width: 44, height: 44 },
  barText: { marginTop: 2, fontSize: 14, color: Colors.C10 },
  userContent: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", paddingLeft: 15, paddingRight: 15 },
  userContentLeft: { flexDirection: "row", },
  userNick: { marginLeft: 2 },
  userNickText: { fontSize: 14, marginTop: 6, marginLeft: 6 },
  userLableCont: { flexDirection: "row",alignItems: 'center', },
  userLable: { marginTop: 6, marginLeft: 6, paddingLeft: 6, paddingRight: 6, lineHeight: 18, borderRadius: 9, backgroundColor: Colors.subjectJbZuo, color: Colors.bai, fontSize: 10 },
  userIdCont: { marginTop: 6, },
  userIdText: {textAlign: 'right', fontSize: 10, color: Colors.hui66},
  userVipText: {marginTop: 6,textAlign: 'right', fontSize: 12, color: Colors.subjectJbZuo},
  walletContent: {backgroundColor: Colors.subject, paddingTop: 20, paddingBottom: 20, marginTop: 20, marginLeft: 15, marginRight: 15, borderRadius: 10, flexDirection: "row", },
  walletBtnCont: {flexDirection: "row", marginTop: 6},
  walletBtn: { paddingLeft: 16, paddingRight: 16, lineHeight: 24, borderRadius: 12, marginRight: 8, backgroundColor: Colors.subjectJbZuo, color: Colors.bai, fontSize: 12 },
  walletContLeft: { marginLeft: 20, marginRight: 20 },
  walletContRight: { marginLeft: 20, marginRight: 20 },
  walletYueText: {color: Colors.bai, fontSize: 12},
  walletYueNum: { color: Colors.bai, fontSize: 16, lineHeight: 26, paddingLeft: 2 }
});